<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-8-3
  Time: 下午4:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轮播效果</title>
    <style>
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        .slider {
            width: 990px;
            height: 196px;
            background: #E59092;
        }

        ul li:first-child {
            margin-left: 0;
        }


        .mir {
            width: 920px;
            height: 176px;
            position: absolute;
            overflow: hidden;
            margin:20px 20px;;
        }

        .mkk{
            position: absolute;
            width:1530px;
        }

        #le {
            display: inline-block;
            float: left;
            width: 35px;
            height: auto;
            margin-top: 80px;
        }

        #ri {
            float: left;
            margin: -20px 960px;
        }

        .mir .mkk span {
            height:152px;
            width: 152px;
            margin: 20px 17px;
            overflow: hidden;
        }
        .cur_li{
            border:2px solid red;
        }
    </style>

    <script>
        $(function () {

        })
        function init() {

        }
        function right() {
//            $(".mkk").animate({right: '-780px'}, 200);
            $(".mkk").animate({right: '+=185px'}, 200);

        }
        function left() {
//            $(".mir ul").animate({right: '-40px'}, 200);
            $(".mkk").animate({right: '-=185px'}, 200);
        }
        function autoRight() {
        }

    </script>
</head>
<body>
<div class="slider">
    <div id="le"><img onclick="left()" src="/public/img/icon01.png"></div>
    <div class="mir">
        <div class="mkk">
            <span class="cur_li"><img style="width: 150px;height:150px;" src="/public/img/loading_bg.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg02.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg03.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg02.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg03.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg02.jpg"></span>
            <span class=""><img style="width: 150px;height:150px;" src="/public/img/loading_bg03.jpg"></span>
        </div>
    </div>
    <div id="ri"><img onclick="right()" src="/public/img/icon01.png"></div>
</div>
</body>
</html>